<template>
  <nav class="navTitle">
    <div class="back" @click="goBack" v-if="show"></div>
    {{title}}
    <div class="bavTitleRigth" v-if="show">
      <router-link to="/" v-if="showTitle" class="color">登录</router-link>
      <router-link :to="rank" v-else class="color">首页</router-link>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'NavTop',
  props: ['showTitle', 'show', 'title'],  /** showTitle:显示的文字 show：是否显示返回和登录 title:标题 */
  data () {
    return {
      rank: '/leader'
    }
  },
  mounted () {
    this.$nextTick(function () {
//      let d = JSON.parse(localStorage.getItem('userInfo')).rank
//      switch (d) {
//        case '3':
//          this.rank = '/leader'
//          break
//        case '2':
//          this.rank = '/agent'
//          break
//        case '1':
//          this.rank = '/tAgent'
//          break
//        default:
//          break
//      }
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .navTitle {
    text-align: center;
    line-height: 0.92rem;
    background-color: #00b2ed;
    color: #fff;
    position: fixed;
    font-weight: bold;
    top:0;
    left:0;
    height:0.92rem;
    width:100%;
    z-index: 1000;
  }
  .navTitle .back {
    width: 0.84rem;
    height: 0.92rem;
    background: url("../assets/img/rightrow.png") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .navTitle .bavTitleRigth {
    width: 1.24rem;
    height: 0.92rem;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: normal;
    font-size: 0.32rem;
  }
  .color{
    color: #fff;
  }
</style>
